<template>
  <div class="list">
      <div class="item">
          <div class="top">
           <div class="left-pic">
               <img :src="leftpic" alt="">
           </div>
           <div class="right-pic">
               <img :src="righttop" alt="" class="img1">
               <img :src="rightbottom" alt="" class="img2">
           </div>
          </div>
          <div class="bottom">
              <h3>{{name}}<span>5A</span></h3>
              <p>"{{title}}"</p>
              <p class="title">点评分<span>{{fraction}}</span>&nbsp;&nbsp; 点评数<span>{{number}}</span></p>
          </div>
          <div class="item-goods">
              <p><span class="tit1">{{type}}</span>{{introduce |upint}} <span class="tit2">{{money}}</span>起></p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
   props:["leftpic","righttop","rightbottom","name","title","fraction","number","type","introduce","money"],
   filters:{
       upint(val){
           if(val.length>12){
               return val.substr(0,15)+'...'
           }else{
               return val
           }
       }
   }
}
</script>

<style scoped>
.list{
    padding: 0 .12rem;
}
.item{
    width: 100%;
    height: 2.9rem;
    background-color: #fff;
    margin-bottom: .16rem;
    border-radius: .08rem;
}
.top{
    display: flex;
    height: 1.56rem;
}
.top .left-pic{
    width: 2.34rem;
    height: 100%;
}
.top .left-pic img{
    width: 2.34rem;
    height: 100%;
}
.top .right-pic{
    width: calc(100%-2.34rem);
      height: 1.56rem;
}
.top .right-pic .img1,.top .right-pic .img2{
    vertical-align: middle;
    width: 1.15rem;
    height: calc(1.56rem/2);
}
.bottom{
    height: .93rem;
    padding: 10px 12px 12px 12px;
    background: #fff;
}
.bottom h3{
    font-size: .2rem;
    font-weight: 700;
    line-height: .2rem;
}
.bottom h3 span{
    font-size: .11rem;
    background: #EEF1F6;
    color: #5678A8;
    margin-left: .05rem;
    font-weight: 100;
}
.bottom p{
    width: 1.2rem;
    font-size: .12rem;
    margin-top: .06rem;
    color: #C8793F;
    background: linear-gradient(transparent 70%,#f9eee6 70%);
}
.bottom .title{
    margin-top: .12rem;
      width: 1.4rem;
    font-size: 11px;
    color: #999;
    background: none;
}
.bottom .title span{
    color: #000;
}
.item-goods{
    padding: .1rem .12rem;
}
.item-goods p{
    font-size: .11rem;
}
.item-goods p .tit1{
    color: #fff;
    background-color: orange;
    padding: .02rem .05rem;
    border-radius: .03rem;
    margin-right: .1rem;
}
.item-goods p .tit2{
    color: orange;
    margin-left: .1rem;
    margin-right: .05rem;
}
</style>